<template>
  <div> <!-- 关于页面 -->
    <HeaderNav :title="$t('m.headernav.USERINFO')" :showBack='true'  />
    <div class="userinfo_container">
      <img :src="userInfo.httpAvatar" class="userinfo_header_image" @click='toAddPhoto'/>
      <img :src="userInfo.httpAvatar" class="userinfo_img" @click='toAddPhoto'/>
      <div class="userinfo_name">{{userInfo.name}} <van-icon  v-if="userInfo.grade == 'blueDiamond'" name="gem-o" info="vip" color="#2161A1" size="30px" />
           <van-icon v-if="userInfo.grade == 'anCrown'" name="bulb-o" info="vip" color= "#91A121" size="30px" /></div>
     
      <div class="userinfo_li_container">
        <router-link class="userinfo_li_item" to="/photoList" >
          <!-- <img src="../../assets/img/user.png" class="userinfo_li_img" /> -->
          <i class="userinfo_li_img fa fa-photo"></i>
          <div>{{$t('m.headernav.PHOTOLIST')}}</div>
        </router-link>
        <div class="userinfo_li_item" @click="addFriend()"> 
          <i :class="`userinfo_li_img ${isFriend ? 'fa fa-star ' : 'fa fa-star-o '}`"></i>
          <div>{{$t('m.msg.FRIEND')}}</div>
        </div>
        
         <router-link class="userinfo_li_item" to="/gift?type=1" > 
          <i class="userinfo_li_img fa fa-gift"></i>
          <div>{{$t('m.headernav.GIFT')}}</div>
        </router-link>
         <router-link class="userinfo_li_item" to="/chartList"> 
          <i class="userinfo_li_img fa fa-commenting-o"></i>
          <div>{{$t('m.headernav.CHARTLIST')}}</div>
        </router-link>
      </div>
<div class="userinfo_li_container"  v-if="!isMine">
   
        <router-link class="userinfo_li_item" :to="'/sendGift?memberId='+userInfo.id">
          <!-- <img src="../../assets/img/user.png" class="userinfo_li_img" /> -->
          <i class="userinfo_li_img fa fa-gratipay"></i>
          <div>{{$t('m.headernav.SENTGIFT')}}</div>
        </router-link>
        <div class="userinfo_li_item" @click="addFavorite()"> 
          <i :class="`userinfo_li_img ${isFavorite ? 'fa fa-heartbeat' : 'fa fa-heart-o'}`"></i>
          <div>{{$t('m.msg.LIKE_PEOPLE')}}</div>
        </div>
         <router-link class="userinfo_li_item" :to="'/paymoney?memberId='+userInfo.id">
          <i class="userinfo_li_img fa fa-usd"></i>
          <div>{{$t('m.headernav.PAY_MONEY2')}}</div>
         </router-link>
         <router-link class="userinfo_li_item" :to="'/upgrade?memberId='+userInfo.id" >
          <i class="userinfo_li_img fa fa-flash"></i>
          <div>{{$t('m.headernav.UPGRADE3')}}</div>
         </router-link>
  
      </div>
      <div class="userinfo_tab_container" ref="fixPara" :style="fixParaStyle">
        <div :class="'userinfo_tab'+(flag ? ' userinfo_tab_select' : '')" @click="showAbout()">{{$t('m.msg.ABOUT')}}</div>
        <div :class="'userinfo_tab'+(!flag ? ' userinfo_tab_select' : '')" @click="showNews()">{{$t('m.msg.NEW_ACTIVITY')}}</div>
      </div>
      <div v-if="flag">
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.SEX')}}</div>
          <div v-if='userInfo.sex == "man"'>{{$t('m.msg.MAN')}}</div>
          <div v-else-if='userInfo.sex == "woman"'>{{$t('m.msg.WOMAN')}}</div>
          <div v-else>{{$t('m.msg.SECRET')}}</div>
          <!-- <div>{{userInfo.sex}}</div> -->
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.BIRTHDAY')}}</div>
          <div>{{userInfo.birthDate}}</div>
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.MSG60')}}</div>
          <div v-if='userInfo.autograph'>{{userInfo.autograph}}</div>
          <div v-else>{{$t('m.msg.SECRET')}}</div>
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.COUNTRY')}}</div>
          <div v-if='userInfo.country'>{{userInfo.country}}</div>
           <div v-else>{{$t('m.msg.SECRET')}}</div>
        </div>
        <!-- <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.MSG61')}}</div>
          <div v-if='userInfo.autograph'>{{userInfo.autograph}}</div>
           <div v-else>{{$t('m.msg.SECRET')}}</div>
        </div> -->
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.MSG62')}}</div>
          <div v-if='userInfo.like == "secrecy"'>{{$t('m.msg.SECRET')}}</div>
          <div v-if='userInfo.like == "homosexual"'>{{$t('m.msg.MSG67')}}</div>
          <div v-if='userInfo.like == "oppositeSex"'>{{$t('m.msg.MSG68')}}</div>
          <div v-if='userInfo.like == "bisexual"'>{{$t('m.msg.MSG69')}}</div>
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.MSG63')}}</div>
         <div v-if='userInfo.emotionalState == "secrecy"'>{{$t('m.msg.SECRET')}}</div>
        <div v-if='userInfo.emotionalState == "single"'>{{$t('m.msg.MSG70')}}</div>
        <div v-if='userInfo.emotionalState == "bePassionatelyInLove"'>{{$t('m.msg.MSG71')}}</div>
        <div v-if='userInfo.emotionalState == "married"'>{{$t('m.msg.MSG72')}}</div>
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.MSG73')}}</div>
          <div v-if='userInfo.income'>${{userInfo.income}}</div>
          <div v-else>{{$t('m.msg.SECRET')}}</div>
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.WIGHT')}}</div>
          <div v-if='userInfo.weight'>{{userInfo.weight}}KG</div>
          <div v-else>{{$t('m.msg.SECRET')}}</div>
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.HEIGHT')}}</div>
          <div v-if='userInfo.height'>{{userInfo.height}}m</div>
          <div v-else>{{$t('m.msg.SECRET')}}</div>
        </div>
        <!-- <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.EDU')}}</div>
          <div>{{$t('m.msg.SECRET')}}</div>
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.JOB')}}</div>
          <div>{{$t('m.msg.SECRET')}}</div>
        </div>
        <div class="userinfo_line_container">
          <div class="userinfo_line_left">{{$t('m.msg.SALARY')}}</div>
          <div>{{$t('m.msg.SECRET')}}</div>
        </div> -->
      </div>
      <div v-else>
        <!-- 最新动态 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          :offset='10'
          v-model="loading"
          :finished="finished"
          :finished-text="$t('m.msg.MSG6')"
          :error.sync="error"
          :error-text="$t('m.msg.MSG7')"
          @load="getFriendCircleList"
        >
        <div v-for="(item, index) in friendCircleList" :key="index">
        <div class="flex">
          <div class="friendCircle_headerImg">
            <img :src="item.member.httpAvatar" class="friendCircle_headerImg"/>
          </div>
          <div>
            <div class="friendCircle_name">{{item.member.name}}</div>
            <div class="friendCircle_date">{{item.stepTime}}</div>
          </div>
          <div class="friendCircle_del" @click="deleteItem(item.message.id)"  >{{$t('m.msg.DELETE_BTN')}}</div>
        </div>
        <div class="friendCircle_content" v-html="`${getEmotionHtml(item.message.content)}`"></div>
        <!-- 加载图片和视频 -->
        <div v-if="item.message.type == 'imageText'" class="flex">
          <img @click='seeImg(path)' class="messageImg" :src="path" v-for="(path, i) in item.message.resources" :key="i" />
        </div>
        <div v-if="item.message.type == 'videoText'">
          <video controls='true' width="300px"  height="100px" :ref="`video${item.message.id}`" :src="item.message.resources"></video>
        </div>
        <div class="friendCircle_bottom">
          <div class="friendCircle_bottom">
            <i class="fa fa-heart friendCircle_img" :style="`color: ${item.isZan ? 'red' : '#a1a1a1'}`" @click="likeMsg(index)" ></i>
            <div class="friendCircle_num">{{item.zanNumber}}</div>
          </div>
          <i class="fa fa-comments friendCircle_img" @click="changeComment(item.message.id)" ></i>
        </div>
        <div v-if="showComment.id == item.message.id && showComment.flag">
          <!-- 评论列表 -->
          <div class="comment_container" v-for="(item, index) in commentList" :key='index'>
            <div class="friendCircle_headerImg">
              <img :src="item.member.httpAvatar" class="friendCircle_headerImg"/>
            </div>
            <div class="flex">
              <div class="friendCircle_name comment_name">{{item.member.name}}</div>
              <div class="friendCircle_date">{{item.createDate}}</div>
            </div>
            <div class="comment_content" v-html="`${getEmotionHtml(item.content)}`"></div>
          </div>
          <!-- 消息框 -->
          <van-field
            v-model="message"
            :placeholder="$t('m.msg.MSG34')"
            type="textarea"
            maxlength="500"
            class="textarea"
          />
          <div class="send_btn" @click="sendMsg(item.message.id)">{{$t('m.msg.SEND_BTN')}}</div>
        </div>
        <div>
        </div>
        </div>
        </van-list>
        </van-pull-refresh>
        <!-- <div class="userinfo_more">加载更多</div> -->
      </div>
    </div>
    <van-popup closeable v-model="dialogFlag">
        <!-- <img :src="img" class='popup_img'/> -->
        <div style='padding: 1vh 0;width:90vw;display:flex;align-items: center;justify-content: center;'>
            <img :src="img" style="width: 100%;max-height: 98vh;"/>
        </div>
      </van-popup>
  </div>
</template>

<script>
import HeaderNav from '@/components/HeaderNav.vue'
import {getUser} from '@/api/session';
import {postQuery, getQuery, getEmotionHtml} from '@/api/query';
import {
  Field,
  Icon,
  List,
  PullRefresh,
  Popup
} from 'vant';
export default {
  name: 'UserInfo',
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    HeaderNav
  },
  data(){
    return {
      dialogFlag:false,
      img: '',
      id: 0,//用户id
      flag: true,
      userInfo: {},
      isFriend: false,  
      isFavorite: false,
      isMine: false, //是否是自己
      page: 1,
      friendCircleList:[],//动态列表
      pages: 0,
      loading: false,
      error: false,
      finished: false,
      refreshing: false,
      showComment: {
        id: 0,
        flag: false
      },//显示评论id，状态
      message: '',//评论框的值
      commentList: [], //评论列表
      fixParaStyle: ''//固定tab
    }
  },
  methods: {
    seeImg(img){
      this.img = img
      this.dialogFlag = true
    },
    toAddPhoto(){
      this.$router.push({
        path:'/addPhoto'  
      })
    },
    //调用获取表情方法
    getEmotionHtml(txt){
      return getEmotionHtml(txt);
    },
    showAbout(){
      this.flag = true;
    },
    showNews(){
      this.flag = false;
    },
    getUserInfo(){
      let that = this;
      getQuery('/memaber/list/get/'+that.id)
          .then (res => {
            if(res.code == 200){
              console.log(res);
              that.userInfo = res.data;
            }else{
              that.$toast.fail(res.msg);
            }
        })
    },
    //查询是否是好友
    getIsFriend(){
      let that = this;
      getQuery('/member/get/isFriend/'+that.id)
        .then (res => {
          if(res.code == 200){
            console.log('是否是好友：',res);
            that.isFriend = res.data;
          }else{
            that.$toast.fail(res.msg);
          }
      })
    },
    //查询是否是喜欢的人
    getIsFavorite(){
      let that = this;
      getQuery('/member/get/isLike/'+that.id)
          .then (res => {
            if(res.code == 200){
              that.isFavorite = res.data;
              console.log('是否是喜欢的人：',res);
            }else{
              that.$toast.fail(res.msg);
            }
        })
    },
    //添加好友
    addFriend(){
      let that = this;
      if(that.isMine){
        that.$router.push({
          path:'/chartList'  
        })
      }else{
        let url = that.isFriend ? '/member/delete/friend/': '/member/add/friend/';
        // if(that.isFriend){
        //   that.$toast.fail(that.$i18n.t('m.msg.MSG30'));
        //   return;
        // }
        postQuery(url+that.id)
          .then (res => {
            if(res.code == 200){
              console.log('添加好友：',res);
              that.isFriend = !that.isFriend;
            }else{
              that.$toast.fail(res.msg);
            }
        })
      }
      
    },
    //添加为喜欢的人
    addFavorite(){
      let that = this;
      // if(that.isFavorite){
      //   that.$toast.fail(that.$i18n.t('m.msg.MSG31'));
      //   return;
      // }
      let url = that.isFavorite ? '/member/delete/like/': '/member/add/like/';
      postQuery(url+that.id)
          .then (res => {
            if(res.code == 200){
              console.log('添加喜欢的人：',res);
              that.isFavorite = !that.isFavorite;
            }else{
              that.$toast.fail(res.msg);
            }
        })
    },
    onRefresh() {
        // 清空列表数据
        this.finished = false;
        //初始化
        this.pages = 0;
        this.friendCircleList = [];
        this.page = 1;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.getFriendCircleList();
      },
    //最新动态
    getFriendCircleList(){
      let that = this
      let url = '/member/friendCircle/message/list';
      let params = {
        pageNumber: that.page,
        isMi: !that.isMine
      }
      if(!that.isMine){
        url += '/'+that.id;
      }
      if(that.pages > 0 && that.page > that.pages){
          that.finished = true;
      }
      getQuery(url, params)
        .then (res => {
          if(res.code == 200){
            console.log('最新动态: ',res);
            //如果数据不够finished
            if(res.data.records.length < 10){
              that.finished = true;
            }
            that.friendCircleList = that.friendCircleList.concat(res.data.records)
            // = res.data.records;
            that.pages = res.data.pages;
            that.page ++;
            that.loading = false;
            that.refreshing = false;
          }else{
            that.$toast.fail(res.msg);
            that.finished = true;
          }
      }).catch(function (error) {
        that.error = true;     
      });
    },
    //点赞
    likeMsg(index){
      let that = this;
      let id = that.friendCircleList[index].message.id
      getQuery('/member/friendCircle/fabulous/'+id)
        .then (res => {
          if(res.code == 200){
            console.log('点赞: ',res);
            //点赞数量
            let flag = that.friendCircleList[index].isZan;
            if(flag){
              that.friendCircleList[index].zanNumber --;
            }else{
              that.friendCircleList[index].zanNumber ++;
            }
            //点赞状态
            that.friendCircleList[index].isZan = !flag;
            
          }else{
            that.$toast.fail(res.msg);
          }
      })
    },
    changeComment(id){
      let that = this;
      //改变展示隐藏状态 
      //改变状态
      if(that.showComment.id == id){
        that.showComment.flag = !that.showComment.flag;
      }else{
        that.showComment.flag = true;
      }
      that.showComment.id = id;
      
      //显示评论时查询评论列表
      if(that.showComment.flag){
        that.getShowCommentList(id);
      }
    },
    //加载评论
    getShowCommentList(id){
      let that = this;
      getQuery('/member/friendCircle/comment/list/'+id)
        .then (res => {
          if(res.code == 200){
            console.log('评论列表: ',res);
            that.commentList = res.data;
          }else{
            that.$toast.fail(res.msg);
          }
        })
    },
    //发送评论
    sendMsg(id){
      let that = this;
      let params = {
        fcmid: id,
        content: that.message
      }
      postQuery('/member/friendCircle/comment', params)
        .then (res => {
          if(res.code == 200){
            console.log('发送评论: ',res);
            that.$toast.success(that.$i18n.t('m.msg.MSG35'))
            //重新渲染评论列表
            that.getShowCommentList(id);
            that.message = '';
          }else{
            that.$toast.fail(res.msg);
          }
      })
    },
    //删除评论
    deleteItem(id){
      let that = this;
      var flag = confirm(that.$i18n.t('m.msg.MSG36'));
      if(!flag){
        return;
      }
      postQuery('/member/friendCircle/message/delete/'+id)
        .then (res => {
          if(res.code == 200){
            that.$toast.success(that.$i18n.t('m.msg.MSG37'))
            //重新渲染评论列表
            that.onRefresh();
          }else{
            that.$toast.fail(res.msg);
          }
      })
    },
    //评论到一定高度固定
    positionTab(){
      let that = this;
      // var oDiv = document.getElementById("fixPara"),
      var oDiv = this.$refs.fixPara;       
            // while (Y) {
            //     H += Y.offsetTop; 
            //     Y = Y.offsetParent;
            // }
            let h = document.body.clientWidth || document.documentElement.clientWidth;
            window.onscroll = function()
            {
                var s = document.body.scrollTop || document.documentElement.scrollTop
                if(s>h+200) {
                  that.fixParaStyle = "background-color: white;position:fixed;z-index: 999;top:4vh;"
                } else {
                  that.fixParaStyle = ""
                }
            }

    }
  },
  created(){
    // console.log(this.i18n.t('m.index.TEXT'))
    //根据type，判断用户信息
    var that = this;
  	let type = that.$route.query.type;
  	if(type == 1){
      that.userInfo = getUser();
      that.isMine = true;
      // that.url = '/mine'
  	}else if(type == 2){
      that.isMine = false;
      that.id = that.$route.query.id;
      that.getUserInfo();
      that.getIsFriend();
      that.getIsFavorite();
      // that.url = '/'
    }
    that.positionTab();
    // that.getFriendCircleList();
  }
}
</script>
<style scoped>
 

  .userinfo_header_image{
    height: 60vh;
    width: 100vw;
  }

  .userinfo_name{
    position: absolute;
    top: 60vh;
    left: 18vw;
    font-weight: 550;
    font-size: 30px;
  }

  .userinfo_img{
    position: absolute;
    top: 60vh;
    left: 2vw;
    width: 95px;
    height: 95px;
  }

  .userinfo_li_container{
    width: 100vw;
    display: flex;
    justify-content: space-around;
    
  }

  .userinfo_li_item{
    /* display: flex; */
    text-align: center;
    color: #a1a1a1;
  }

  .userinfo_li_img{
    font-size: 80px;
    /* width: 80px;
    height: 80px; */
    margin-top: 20px;
    margin-bottom: 5px;
  }

  .userinfo_tab_container{
    margin-top: 3vh;
    display: flex;
  }

  .userinfo_tab{
    width: 50vw;
    height: 7vh;
    line-height: 7vh;
    text-align: center;
    font-size: 30px;
    
  }

  .userinfo_tab_select{
    color: white;
    background-color: #01D2FF;
  }

  .userinfo_line_container{
    display: flex;
    flex-wrap:wrap;
    font-size: 32px;
    /* height: 100px; */
    line-height: 100px;
    padding: 0px 20px;
  }

  .userinfo_line_left{
    /* width: 50%; */
    color: #a1a1a1;
    width: 200px;
  }
  
  .userinfo_more{
  	margin-top: 20px;
  	margin-bottom: 40px;
  	height: 130px;
  	width: 100vw;
  	background-color: white;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	font-size: 36px;
  }

  .flex{
    display: flex;
    flex-wrap: wrap;
  }
  .friendCircle_name{
    font-size: 26px;
    color: rgb(1,88,144);
    margin: 13px 30px;
  }

  .friendCircle_date{
    font-size: 26px;
    color: #a1a1a1;
    margin: 20px 30px;
  }

  .friendCircle_content{
    /* height: 60px; */
    width: 96vw;
    margin: 30px 3vw;
    font-size: 32px;
    color: #a1a1a1;
  }

  .friendCircle_bottom{
    display: flex;
  }
  .friendCircle_img{
    font-size: 60px;
    margin: 20px 0px 0px 40px;
    color: #a1a1a1;
  }

  .friendCircle_num{
    margin: 44px 20px;
  }

  .friendCircle_headerImg{
    width: 95px;
    height: 95px;
    border-radius: 50%;
    margin: 10px;
  }

  .comment_container{
    margin: 10px 20px;
  }

  .comment_name{
    margin: 20px 4px 0px 40px;
  }

  .comment_content{
    /* height: 60px; */
    width: 96vw;
    margin: 10px 5vw;
    font-size: 28px;
    color: #a1a1a1;
  }

  .textarea{
  	border-radius: 10px;
  	border: 2px #a1a1a1 solid;
  	margin: 30px 2%;
  	width: 96%;
  	height: 13vh;
	  background-color: white;
  }

  .send_btn{
  	color: white;
  	height: 50px;
  	width: 80px;
  	background-color: #01D2FF;
  	border-radius: 5px;
  	font-size: 16px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
    margin-left: 80vw;
  }

  .messageImg{
    height: 30vw;
    width: 30vw;
    object-fit: cover;
    margin: 10px 0px 10px 20px;
  }

  .friendCircle_del{
    margin: 20px 0px 0px 30vw;
    color: red;
  }

  .popup_img{
    width: 80vw;
    /* height: 80vh; */
  }

</style>
